<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item prop="name">
				<el-input v-model="state.queryForm.name" placeholder="昵称"></el-input>
			</el-form-item>
			<el-form-item prop="gamename">
				<el-input v-model="state.queryForm.gamename" placeholder="游戏名"></el-input>
			</el-form-item>
			<el-form-item prop="title">
				<el-input v-model="state.queryForm.title" placeholder="标题"></el-input>
			</el-form-item>
			<el-form-item prop="tag1">
				<el-select 
					v-model="state.queryForm.tag1" 
					filterable 
					allow-create 
					default-first-option 
					placeholder="标签1" 
					clearable>
					<el-option 
						v-for="tag in tagOptions.tag1" 
						:key="tag" 
						:label="tag" 
						:value="tag">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="tag2">
				<el-select 
					v-model="state.queryForm.tag2" 
					filterable 
					allow-create 
					default-first-option 
					placeholder="标签2" 
					clearable>
					<el-option 
						v-for="tag in tagOptions.tag2" 
						:key="tag" 
						:label="tag" 
						:value="tag">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="tag3">
				<el-select 
					v-model="state.queryForm.tag3" 
					filterable 
					allow-create 
					default-first-option 
					placeholder="标签3" 
					clearable>
					<el-option 
						v-for="tag in tagOptions.tag3" 
						:key="tag" 
						:label="tag" 
						:value="tag">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="type">
				<el-select v-model="state.queryForm.type" placeholder="请选择类型" clearable>
					<el-option label="全部" value=""></el-option>
					<el-option label="热游" value="1"></el-option>
					<el-option label="新游" value="2"></el-option>
					<el-option label="好游" value="3"></el-option>
					<el-option label="烂游" value="4"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<el-space>
			<el-space>
				<el-button icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-space>
			<el-space>
				<el-button plain icon="Download" @click="downloadHandle('/kyy/forum/export')">导出</el-button>
			</el-space>
			<el-space>
				<el-button icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>
			</el-space>
		</el-space>
		<!-- 显示帖子列表数据 -->
		<el-table
			v-loading="state.dataListLoading"
			:data="state.dataList"
			border
			class="layout-table"
			show-overflow-tooltip
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="head" label="头像" header-align="center" align="center">
				<template #default="scope">
					<img :src="scope.row.head || 'path/to/default-avatar.png'" alt="头像" style="width: 50px; height: 50px; border-radius: 50%" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="昵称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="gamename" label="游戏名" header-align="center" align="center"></el-table-column>
			<el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column>
			<el-table-column prop="content" label="内容" header-align="center" align="center"></el-table-column>
			<el-table-column prop="image" label="图片列表" header-align="center" align="center">
				<template #default="scope">
					<el-button v-if="scope.row.image" type="primary" link @click="handleShowImageViewer(scope.row.image)"> 有图片 </el-button>
					<span v-else>无图片</span>
				</template>
			</el-table-column>
			<el-table-column prop="tag1" label="标签1" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.tag1" size="small" effect="light" type="success">
						{{ scope.row.tag1 }}
					</el-tag>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column prop="tag2" label="标签2" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.tag2" size="small" effect="light" type="warning">
						{{ scope.row.tag2 }}
					</el-tag>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column prop="tag3" label="标签3" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.tag3" size="small" effect="light" type="info">
						{{ scope.row.tag3 }}
					</el-tag>
					<span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" header-align="center" align="center">
				<template #default="scope">
					<el-tag :type="getTypeTagType(scope.row.type)">
						{{ GameTypeLabel[scope.row.type] }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="num1" label="浏览量" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.row.num1 }} 次</span>
				</template>
			</el-table-column>
			<el-table-column prop="num2" label="评论量" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.row.num2 }} 条</span>
				</template>
			</el-table-column>
			<el-table-column prop="num3" label="点赞量" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.row.num3 }} 次</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="openid" label="" header-align="center" align="center"></el-table-column> -->
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
				<template #default="scope">
					<el-tooltip content="编辑帖子信息" placement="top">
						<el-button type="primary" :icon="Edit" circle @click="addOrUpdateHandle(scope.row.id)" />
					</el-tooltip>
					<el-tooltip content="删除帖子" placement="top">
						<el-button type="danger" :icon="Delete" circle @click="deleteBatchHandle(scope.row.id)" />
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" v-model:visible="addOrUpdateVisible" @refreshDataList="getDataList"></add-or-update>
	</el-card>

	<!-- 图片预览组件 -->
	<el-image-viewer
		v-if="imageViewerVisible"
		:url-list="imageUrlList"
		:initial-index="0"
		@close="imageViewerVisible = false"
		:teleported="true"
		:append-to-body="true"
		:z-index="9999"
	/>
</template>

<script setup lang="ts" name="KyyForumIndex">
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
import { useCrud } from '@/hooks'
import { reactive, nextTick, ref, onMounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import { ElImageViewer } from 'element-plus'
import { GameTypeOptions, GameTypeLabel } from '@/types/forum'
import axios from 'axios'

const state: IHooksOptions = reactive({
	dataListUrl: '/kyy/forum/page',
	deleteUrl: '/kyy/forum',
	queryForm: {
		head: '',
		name: '',
		gamename: '',
		title: '',
		content: '',
		image: '',
		tag1: '',
		tag2: '',
		tag3: '',
		type: '',
		num1: '',
		num2: '',
		num3: ''
	}
})

const queryRef = ref()
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateVisible.value = true
	nextTick(() => addOrUpdateRef.value.init(id))
}

// 图片查看器相关变量
const imageViewerVisible = ref(false)
const imageUrlList = ref<string[]>([])

// 处理显示图片查看器
const handleShowImageViewer = (imageStr: string) => {
	if (imageStr) {
		// 过滤掉空图片
		imageUrlList.value = imageStr.split(',').filter(img => img && img.trim() !== '')

		// 确保有图片时才显示查看器
		if (imageUrlList.value.length > 0) {
			// 设置延迟，避免事件冲突
			setTimeout(() => {
				imageViewerVisible.value = true
			}, 0)
		}
	}
}

// 标签选项数据
const tagOptions = reactive({
	tag1: [],
	tag2: [],
	tag3: []
})

// 加载标签选项数据
const loadTagOptions = () => {
	axios.get('/kyy/forum/tags').then(res => {
		if (res.data && res.data.code === 0) {
			// 提取唯一标签
			const tags = res.data.data || []
			
			// 获取所有不同的标签1值
			const tag1Set = new Set(tags.map(item => item.tag1).filter(Boolean))
			tagOptions.tag1 = Array.from(tag1Set)
			
			// 获取所有不同的标签2值
			const tag2Set = new Set(tags.map(item => item.tag2).filter(Boolean))
			tagOptions.tag2 = Array.from(tag2Set)
			
			// 获取所有不同的标签3值
			const tag3Set = new Set(tags.map(item => item.tag3).filter(Boolean))
			tagOptions.tag3 = Array.from(tag3Set)
		}
	}).catch(error => {
		console.error('加载标签选项失败:', error)
	})
}

// 页面挂载时加载标签选项
onMounted(() => {
	loadTagOptions()
})

// 在获取数据列表后更新标签选项
const handleGetDataListSuccess = () => {
	loadTagOptions()
}

// 原有的获取数据列表方法包装
const { getDataList: originalGetDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, downloadHandle, reset } = useCrud(state)

// 修改数据加载成功后的处理
const loadTagOptionsFromDataList = () => {
	if (state.dataList && state.dataList.length > 0) {
		// 从现有数据中提取标签
		const tag1Set = new Set(state.dataList.map(item => item.tag1).filter(Boolean))
		tagOptions.tag1 = Array.from(tag1Set)
		
		const tag2Set = new Set(state.dataList.map(item => item.tag2).filter(Boolean))
		tagOptions.tag2 = Array.from(tag2Set)
		
		const tag3Set = new Set(state.dataList.map(item => item.tag3).filter(Boolean))
		tagOptions.tag3 = Array.from(tag3Set)
	}
}

// 修改获取数据列表方法
const getDataList = () => {
	originalGetDataList().then(() => {
		loadTagOptionsFromDataList()
	})
}

// 添加辅助函数
const getTypeTagType = (type: string) => {
	switch (type) {
		case '1': return 'danger'  // 热游
		case '2': return 'warning' // 新游
		case '3': return 'success' // 好游
		case '4': return 'info'    // 烂游
		default: return ''
	}
}
</script>
